<template>
  <div class="home">
    <Banner :proList="proList" />
    <ProductList :proList="proList" />
    <Step />
    <section
      class="home-footer relative bg-no-repeat bg-cover bg-center -mt-24 text-center pb-10 pt-32"
    >
      <p
        class="text-md sm:text-2xl text-dark max-w-4xl mb-20 m-auto px-4 leading-normal"
      >
        All mystery box draws are 100% fair thanks to our industry-leading
        "Provably Fair" technology. We have no way of manipulating the outcome
        in any way and we provide full transparency.
      </p>
    </section>
  </div>
</template>

<script>
import Banner from "./components/banner.vue";
import ProductList from "./components/productList.vue";
import Step from "./components/step.vue";
export default {
  components: { Banner, ProductList, Step },
  data() {
    return {
      proList: [],
    };
  },
  created() {
    this.$api.getBoxs().then((res) => {
      this.proList = res.data.data.box;
    });
  },
};
</script>

<style lang="scss" scoped>
.home {
  .home-footer {
    background-image: url("../../assets/img/footer.svg");
  }
}
</style>
